<template>
<page-header-wrapper :title="false" content="Banner管理">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
        <a-form class="ant-advanced-search-form" labelAlign="right">
            <a-row :gutter="24">
                <a-col :span="6">
                    <a-form-item label="名称">
                        <a-input v-model="queryParam.name" style="width: 100%" placeholder="请输入名称" allowClear />
                    </a-form-item>
                </a-col>
                <a-col :span="6" :style="{ textAlign: 'right' }">
                    <a-button type="primary" @click="handleSearch">
                        查询
                    </a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="reset">
                        重置
                    </a-button>
                </a-col>
            </a-row>
        </a-form>
        <div class="content">
            <div class="table-header">
                <a-button type="primary" @click="$refs.detail.showDrawer()">新增</a-button>
            </div>
            <div>
                <a-table :columns="columns" :data-source="listData" rowKey="id" bordered :scroll="{ x: 1500 }" :pagination="pagination" @change="handleTableChange">
                    <template slot="parent_url" slot-scope="text, record">
                        <img :src="text" width="100px" height="100px" alt="图片" @click="preview(text)">
                    </template>
                    <template slot="operation" slot-scope="text, record">
                        <a ref="javascript:;" @click.stop="$refs.detail.showDrawer(record.id, 'check')">查看</a>
                        <a-divider type="vertical" />
                        <a ref="javascript:;" @click.stop="$refs.detail.showDrawer(record.id, 'edit')">编辑</a>
                        <a-divider type="vertical" />
                        <a-popconfirm title="确定删除操作?" ok-text="确定" cancel-text="取消" @confirm="deleteItem(record)">
                            <a ref="javascript:;" @click.stop="() => { }">删除</a>
                        </a-popconfirm>
                    </template>
                </a-table>
            </div>
        </div>
    </a-card>
    <detail ref="detail" @refresh="refresh" />
    <preview ref="preview" />
</page-header-wrapper>
</template>

<script>
import Detail from './detail'
import Preview from '@/components/preview/'
import {
    getBannerList,
    deleteBanner
} from '@/api/banner'

const columns = [{
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true
    },
    {
        title: '主图',
        dataIndex: 'parent_url',
        key: 'parent_url',
        scopedSlots: {
            customRender: 'parent_url'
        }
    },
    {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        ellipsis: true
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        width: 200,
        fixed: 'right',
        scopedSlots: {
            customRender: 'operation'
        }
    }
]
export default {
    components: {
        Detail,
        Preview
    },
    data() {
    return {
      pagination: {},
      queryParam: {},
      listData: [],
      columns,
      loading: false,
    }
  },
  created() {
    this.getListData({ page: 1, page_size: 10 })
  },
  methods: {
    handleSearch(e) {
      e.preventDefault()
      this.getListData({ page: 1, page_size: 10 })
    },
    // 请求列表数据
    getListData(params = {}) {
      this.loading = true
      getBannerList({
        ...params,
        ...this.queryParam,
      })
        .then((res) => {
          this.listData = res.data
          this.pagination = {
            total: res.total,
            pageNum: res.page,
            pageSize: res.page_size,
            showTotal: () => {
              return `共计${res.total}条`
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 分页
    handleTableChange(pagination) {
      this.pagination = {
        pageNum: pagination.current,
        pageSize: pagination.pageSize
      };
      this.getListData({
        page: pagination.current,
        page_size: pagination.pageSize,
      });
    },
    reset() {
      this.queryParam = {}
    },
    refresh() {
      this.getListData({ page: this.pagination.pageNum, page_size: this.pagination.pageSize })
    },
    deleteItem(record) {
      deleteBanner(record.id).then(() => {
        this.$message.success('删除成功')
        if (this.listData.length === 1 && this.pagination.pageNum > 1) {
          this.pagination.pageNum -= 1
        }
        this.refresh()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.ant-advanced-search-form .ant-form-item {
    display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
    flex: 1;
}

#components-form-demo-advanced-search .ant-form {
    max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

.content {
    margin: 12px;

    .table-header {
        margin-bottom: 12px;
    }
}
</style>
